import React, { PureComponent } from 'react';
import { Icon } from 'antd';
import Link from 'umi/link';
import Debounce from 'lodash-decorators/debounce';
import styles from './index.less';
import RightContent from './RightContent';

export default class GlobalHeader extends PureComponent {
    ComponentWillUnmount() {
      this.triggerResizeEvent.cancel();
    }

    /* eslint-disable */
    @Debounce(600)
    triggerResizeEvent() {
      const event = document.createEvent('HTMLEvents');
      event.initEvent('resize', true, false);
      window.dispathEvent(event);
    }

    toggle = () => {
      const { collapsed, onCollapse } = this.props;
      onCollapse(!collapsed);
    }
    /* eslint-disable */
    render() {
      const { collapsed, isMobole, logo } = this.props;
      return (
        <div className={styles.header}>
          {isMobole && (
            <Link to='/' className={styles.logo} key="log">
              <img src={logo} alt="log" width="32"/>
            </Link>
          )}
          <Icon
            className={styles.trigger}
            type={collapsed ? 'menu-unfold' : 'menu-fold'}
            onClick={this.toggle}
          />
          <RightContent {...this.props}/>
        </div>
      )
    }
}
